const Counter = Vue.defineComponent({
    props: {
        value: Number,
        min: Number,
        max: Number
    },
    data() {
        return {
            count: this.value || 0
        }
    },
    watch: {
        count() {
            this.$emit('update:value', this.count)
        }
    },
    methods: {
        add() {
            if (typeof this.max === 'number') {
                if (this.count < this.max) this.count++;
            } else {
                this.count++;
            }
        },
        sub() {
            if (typeof this.min === 'number') {
                if (this.count > this.min) this.count--;
            } else {
                this.count--;
            }
        }
    },
    template: `
    <div class="counter-container">
        <button @click="sub" id="decrement-btn">-</button>
        <span id="counter-value">{{count}}</span>
        <button @click="add" id="increment-btn">+</button>
    </div>
    `
});
    